<template>
  <div>
    <el-row class="row--filter" type="flex" align="middle">
        时间：
        <el-date-picker
                class="filter-item"
                v-model="queryParameter.dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :clearable="false"
                :value-format="dateFormat">
        </el-date-picker>
    </el-row>
    <TableSimple :tableData="tableData" class="table"/>
    </div>
</template>

<script>
import { commonMixin as dateMixin } from '@/mixins/user-analysis'
import { subComponentMixin } from '@/mixins/user-analysis/user-operation'
import TableSimple from '../user-data/table-simple'

export default {
  name: 'UserPersistenceAnalysis',
  mixins: [dateMixin, subComponentMixin],
  components: { TableSimple },
  data () {
    return {
      queryParameter: {
        dateRange: null
      },
      tableData: {
        column: [
          {
            label: '',
            prop: 'date'
          },
          {
            label: '1-7天',
            prop: '0'
          },
          {
            label: '8-14天',
            prop: '1'
          },
          {
            label: '15-21天',
            prop: '2'
          },
          {
            label: '22-28天',
            prop: '3'
          },
          {
            label: '29-60天',
            prop: '4'
          },
          {
            label: '61-90天',
            prop: '5'
          },
          {
            label: '91-120天',
            prop: '6'
          }
        ],
        data: []
      }
    }
  },
  methods: {
    getData () {
      this._getPluginUserRetained()
    },
    async _getPluginUserRetained () {
      const { data: { data, code } } = await this.$http
        .get(this.getApiUrl(`dataanalysis_iot/user_metrics/getPluginUserRetained`, false),
          {
            params: this.requestParams
          })
      if (code === 0) {
        const array = []
        for (const [key, val] of Object.entries(data)) {
          array.push({ date: key, ...val })
        }
        this.tableData.data = array
      }
    }
  }

}
</script>

<style lang="scss" scoped>
    @import "~element-theme-chalk/src/common/var.scss";
    @import "@/assets/scss/modules/variables-module.scss";
    @import "@/assets/scss/modules/common-module.scss";

    .row--filter {
        @include filter-row;
    }
</style>
